<template>
	<view class="content">
		<view class="mainHeader" :style="{paddingTop: titleTop + 'px'}">
			<headNav class="headWrap" :minHeight="statusBarHeight" :navTitle="navTitle">
			</headNav>
		</view>
		<view class="serviceWrap">
			<view class="serviceLeft">
				<image src="" class="kfImg" mode="aspectFit"></image>
				<view class="serviceInfo">
					<view class="title">
						Hi～喵喵很高兴为您服务
					</view>
					<view class="dateTxt">
						客服工作时间：9:00至18:00
					</view>
				</view>
			</view>
			<view class="serviceRight">
				<image src="/static/my/kfIcon.png" class="kfIcon" mode="widthFix"></image>
				<view class="txt">
					人工客服
				</view>
			</view>
		</view>
		<view class="options">
			<view :class="index==optionIndex?'option action':'option'" @click="optionFn(index)"
				v-for="(item,index) in option" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="InfoWrap">
			<uni-collapse accordion v-model="accordionVal" @change="change"  ref="collapse">
				<uni-collapse-item :title="item.title" titleBorder='none' :border='false'
					v-for="(item,index) in collapseData" :key="index">
					<view class="content">
						<text class="text">{{item.content}}</text>
					</view>
				</uni-collapse-item>

			</uni-collapse>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '帮助中心',
				option: [{
					name: '猜你想问',

				}, {
					name: '喵喵公告',

				}],
				optionIndex: 0,
				accordionVal: '',
				collapseData: [],
				helpCenterData: {}
			}
		},
		onLoad() {
			this.getHelpCenterFn()
		},
		async onShow() {
			await this.$onLaunched
		},
		// onShareAppMessage(res) {
		// 	return {
		// 		title: "给你分享了一份宝藏，快进来看看～",
		// 		path: '/pages/index/index',
		// 		imageUrl: '../../static/share.png'
		// 	};
		// },
		methods: {
			change(e) {
				console.log(e);
			},
			optionFn(index) {
				let that = this;
				this.collapseData = [];
				// that.accordionVal = ' ';
				/* setTimeout(() => {
					that.accordionVal = '0';
				}, 1500); */
				this.optionIndex = index;
				if (this.optionIndex == 0) {
					this.collapseData = this.helpCenterData.announcement.list;
				} else {
					this.collapseData = this.helpCenterData.faq.list;
				}
				// #ifdef MP
				this.$nextTick(() => {
					this.$refs.collapse.resize();
					that.accordionVal = '0';
				})
				// #endif
			},
			// 获取公告列表
			getHelpCenterFn() {
				let that = this;
				this.$http('/v1/help/center').then(res => {
					console.log(res, "获取公告列表");
					this.helpCenterData = res.data;
					this.option[0].name = this.helpCenterData.announcement.category;
					this.option[1].name = this.helpCenterData.faq.category;
					this.collapseData = this.helpCenterData.announcement.list;
					// #ifdef MP
					this.$nextTick(() => {
						this.$refs.collapse.resize()
					})
					// #endif
					setTimeout(() => {
						that.accordionVal = '0';
					}, 1500);
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #FFF2F2;
	}
</style>
<style lang="scss" scoped>
	.serviceWrap {
		width: 706rpx;
		min-height: 164rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(184, 184, 184, 0.5);
		border-radius: 19rpx;
		margin: 10upx auto 36upx;
		padding: 28upx 46upx 28upx 32upx;
		@include flexLayout(center, space-between);

		.serviceLeft {
			@include flexLayout(center, flex-start);

			.kfImg {
				@include setwh(106upx, 106upx);
				margin-right: 20upx;
				border-radius: 50%;
				background-color: #454545;
			}

			.title {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 23rpx;
				color: #454545;
				line-height: 32rpx;
				margin-bottom: 20upx;
			}

			.dateTxt {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 17rpx;
				color: #AFAFAF;
				line-height: 25rpx;
			}
		}

		.serviceRight {
			@include flexLayout(center, center);
			flex-direction: column;

			.kfIcon {
				@include setwh(50upx, 0);
				margin-bottom: 10upx;
			}

			.txt {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 16rpx;
				color: #4C4C4C;
				line-height: 22rpx;
			}
		}
	}

	.options {
		@include flexLayout(center, center);
		margin-bottom: 22upx;

		.option {
			font-family: SourceHanSansSC, SourceHanSansSC;
			font-weight: bold;
			font-size: 32rpx;
			color: #C8C8C8;
			line-height: 46rpx;
			position: relative;
			transition: color .5s;

			&:after {
				content: '';
				width: 0;
				height: 10rpx;
				background: none;
				border-radius: 6rpx;
				@include positionCenter;
				top: 54upx;
				transition: width .5s;
			}

			&+.option {
				margin-left: 150upx;
			}
		}

		.action {
			color: #4C4C4C;

			&:after {
				content: '';
				width: 63rpx;
				background: #FF8387;
			}
		}
	}

	::v-deep .InfoWrap {
		width: 706rpx;
		min-height: 664rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(184, 184, 184, 0.5);
		border-radius: 20rpx;
		margin: 0 auto;
		padding: 34upx 42upx;

		.uni-collapse-item {
			margin-bottom: 20upx;

			.uni-collapse-item__title-box {
				height: 63rpx;
				background: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, #FEDEDE 100%);
				border-radius: 32rpx;
				padding: 0 50upx;

				.uni-collapse-item__title-text {
					font-family: SourceHanSansSC, SourceHanSansSC;
					font-weight: 500;
					font-size: 29rpx;
					color: #5A5A5A;
					line-height: 40rpx;
				}
			}

			.uni-collapse-item__title-arrow {
				transform: rotate(-90deg);
			}

			.uni-collapse-item__title-arrow-active {
				transform: rotate(0deg);
			}
		}



		.content {
			padding: 12upx 50upx;

			.text {
				font-family: SourceHanSansSC, SourceHanSansSC;
				font-weight: 500;
				font-size: 26rpx;
				color: #898989;
				line-height: 36rpx;
			}
		}
	}
</style>